import React from 'react';
import { connect } from "react-redux";
import { fetchPosts, delRecord, saveRecord } from '../Redux/Action/Index';
import select from "../Redux/select";
import ViewList from './ViewList';
import Modal from './Modal';
import Pagination from 'rc-pagination';
import 'rc-pagination/assets/index.css';

class Page3 extends React.Component {

	//init
	constructor(props) {
		super(props);

		this.state = {
			page: {
				current: 1,
				pageSize: 2
			}
		};
	}

	saveRecord = () => {
		var user = {};
		if (this.refs.email.value == '') {
			this.refs.email.focus();
			return;
		}
		user.email = this.refs.email.value;

		if (this.refs.passwd.value == '') {
			this.refs.passwd.focus();
			return;
		}
		user.passwd = this.refs.passwd.value;

		if (this.refs.param.value == '') {
			this.refs.param.focus();
			return;
		} else {
			user.url = this.refs.param.value;
			var data = { data: user };
			// this.refs.getViewList.wrappedInstance.addRecord(data);
			let url = 'http://127.0.0.1:3000/add';
			this.props.dispatch(saveRecord(url,data));
			this.refs.getModal.hideLayer();
			this.refs.fm.reset();
			this.onChange(this.state.page.current,this.state.page.pageSize);
		}
	}

    getDate = (page) => {
        let url = 'http://127.0.0.1:3000/findAll'
        this.props.dispatch(fetchPosts(url, page));
    }

    onChange = (current, pageSize) => {
        console.log('current', current)
        let skip = (current - 1) * pageSize;
        let page = { skip: skip, pageSize: pageSize, current: current }
        this.setState({ page: page });
        this.getDate({ skip: skip, pageSize: pageSize });
    }

    delRecord = (id,e) => {
		e.preventDefault();
		let page = this.state.page;
		if(this.state.page.current>1 && this.props.pageList.length==1){
			let _current = this.state.page.current-1;
			page.current=_current
		}
		let url = 'http://127.0.0.1:3000/delRecord?id=' + id;
        this.props.dispatch(delRecord(url));
		this.onChange(page.current,page.pageSize);
        console.log('state',this.state);
    }

   //组件被插入DOM后执行
    componentDidMount() {
		this.onChange(this.state.page.current,this.state.page.pageSize);
    }

    componentWillReceiveProps(nextProps) {
		if(this.props!==nextProps){
		}
    }		

	render() {
		const { pageList, total, isFetching, data } = this.props;

		const content = <form className="form-horizontal" ref="fm" >
			<div className="form-group">
				<label className="col-sm-2 control-label">Email</label>
				<div className="col-sm-10">
					<input type="email" className="form-control" ref="email" />
				</div>
			</div>
			<div className="form-group">
				<label className="col-sm-2 control-label">Password</label>
				<div className="col-sm-10">
					<input type="text" className="form-control" ref="passwd" />
				</div>
			</div>
			<div className="form-group">
				<label className="col-sm-2 control-label">URL</label>
				<div className="col-sm-10">
					<input type="text" className="form-control" ref="param" />
				</div>
			</div>
			<div className="form-group">
				<div className="col-sm-2">
				</div>
				<div className="col-sm-10">
					<button type="button" className="btn btn-success" onClick={this.saveRecord}>保存</button>
					<button type="button" style={{ marginLeft: "20px" }} className="btn btn-warning" onClick={() => { this.refs.getChildOpen.hideLayer(); }}>取消</button>
				</div>
			</div>
		</form>

		return (
			<div id='page3'>
				<div className="row">
					<div className="col-sm-1">
						<button type="button" onClick={() => { this.refs.getModal.showLayer(); }} className="btn btn-primary">Add</button>
					</div>
				</div>
				<div className="row">
					<div className="col-sm-12">
						<div>
							<ViewList delFun={this.delRecord} ref="getViewList" isFetching={isFetching} items={pageList}/>
							<Pagination showQuickJumper showSizeChanger pageSize={this.state.page.pageSize} current={this.state.page.current} onChange={this.onChange} total={total} />
						</div>
					</div>
				</div>
				<Modal ref="getModal" type={2}>{content}</Modal>
			</div>
		);
	}
}

Page3.propTypes = {
    pageList: React.PropTypes.array,
    total: React.PropTypes.number,
    data: React.PropTypes.object,
    isFetching: React.PropTypes.bool.isRequired,
}

Page3.defaultProps = {
    pageList: [],
    total: 0,
    data: {},
    isFetching: true
};

export default connect(select)(Page3);
